<template>
	<view class="zone">
		<Header title="邀请好友" color="#fff"></Header>

		<view class="main">
			<view class="box">
				<view class="liebiao" @click="$p.navto('/pages/my/invite')">
					<view class="left"> 推广海报 </view>
					<image class="img_right" src="http://img.cpgm.cc/panda/static/my/you.png" mode="widthFix"></image>
				</view>
				<!-- <view @click="tuiguang" class="liebiao">
					<view class="left"> 推广链接 </view>
					<image class="img_right" src="http://img.cpgm.cc/panda/static/my/you.png" mode="widthFix"></image>
				</view> -->
				<!-- <view class="liebiao" @click="show = true">
					<view class="left"> 我的邀请人 </view>
					<image class="img_right" src="http://img.cpgm.cc/panda/static/my/you.png" mode="widthFix"></image>
				</view> -->
				<!-- <view class="liebiao" @click="qudao">
					<view class="left"> 渠道收益 </view>
					<image class="img_right" src="http://img.cpgm.cc/panda/static/my/you.png" mode="widthFix"></image>
				</view> -->
				<view class="liebiao" @click="$p.navto('/pages/my/tuiguang')">
					<view class="left"> 推广奖励 </view>
					<image class="img_right" src="http://img.cpgm.cc/panda/static/my/you.png" mode="widthFix"></image>
				</view>
				<view @click="show4 = true" class="liebiao">
					<view class="left"> 联系方式 </view>
					<image class="img_right" src="http://img.cpgm.cc/panda/static/my/you.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

	
		<!-- 商务合作 -->
		<u-popup mode="center" border-radius="30" v-model="show2">
			<view class="tanchu">
				<view class="warps">
					<view class="m_title">
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
						<text>推广链接</text>
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
					</view>
					<view class="botm"> 开局一士兵熊猫,隐藏剧情,探索、娱乐赚米两不误。 </view>
					<!-- 链接http -->
					<view class="http">
						{{ val }}
					</view>
					<!-- /复制链接 -->
					<view class="copy button" @click="copy()"> 复制链接 </view>
				</view>
			</view>
			<image class="cha" @click="cha2" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix"></image>
		</u-popup>

		<u-mask :show="show">
			<view class="warp">
				<view class="myinvite">
					<view class="m_title">
						<text>我的邀请人</text>
					</view>
					<view class="info">
						<image :src="userinfo.p_wx_img? userinfo.p_wx_img: 'http://img.cpgm.cc/panda/static/login/logo.png'" mode="widthFix" />
						<text>{{ userinfo.p_wx_nickname ? userinfo.p_wx_nickname : "潮玩新人" }}</text>
						<view class="weixin">
							<view class="wxh"> 微信号 </view>
							<input type="text" class="inp" name="" :disabled="true" v-model="p_wx" placeholder="暂未设置"
								id="" />
							<view class="button" @click="copy(p_wx)">复制</view>
						</view>
						<view class="weixin">
							<view class="wxh"> QQ号 </view>
							<input type="text" class="inp" name="" :disabled="true" v-model="p_QQ" placeholder="暂未设置"
								id="" />
							<view class="button" @click="copy(p_wx)">复制</view>
						</view>
						<view class="weixin">
							<view class="wxh"> 手机号 </view>
							<input type="text" class="inp" name="" :disabled="true" v-model="p_phone"
								placeholder="暂未设置" id="" />
							<view class="button" @click="copy(p_wx)">复制</view>
						</view>
					</view>
				</view>
				<image class="close" @click="show = false" src="http://img.cpgm.cc/panda/static/my/cha.png"
					mode="widthFix"></image>
			</view>
		</u-mask>

		<u-mask :show="show4">
			<view class="warpss">
				<view class="top_wa">
					<image src="http://img.cpgm.cc/panda/static/feed/cha.png" @click="show4 = false" class="chahao"
						mode="widthFix"></image>
					<!-- 上面的头部 -->
					<view class="head_tou"> 联系方式 </view>
					<view class="shuom">
						填写联系方式可让好友快速联系上您<br />
						如涉及隐私谨慎填写或留空白即可~
					</view>
					<!-- //微信号 -->
					<view class="weixin">
						<view class="wxh"> 微信号 </view>
						<input type="text" class="inp" name="" v-model="wx" placeholder="请输入微信号" id="" />
					</view>
					<view class="weixin">
						<view class="wxh"> QQ号 </view>
						<input type="text" class="inp" name="" v-model="QQ" placeholder="请输入QQ号" id="" />
					</view>
					<view class="weixin">
						<view class="wxh"> QQ群 </view>
						<input type="text" class="inp" name="" v-model="qqgroup" placeholder="请输入QQ群" id="" />
					</view>
					<view class="weixin">
						<view class="wxh"> 手机号 </view>
						<input type="text" class="inp" name="" v-model="phon" placeholder="请输入手机号" id="" />
					</view>
					<!-- 下面的确认按钮 -->
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="queding" class="btn_que button">
						确定
					</u-button>
				</view>
			</view>
		</u-mask>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				phon: "",
				QQ: "",
				wx: "",
				show4: false,
				show2: false,
				name: "邀请好友",
				val: "http://chwmx.qxgm.site:85/qr/" + uni.getStorageSync("invite_code"),
				userinfo: uni.getStorageSync("userinfo"),
				show: false,
				p_wx: "",
				p_QQ: "",
				p_phone: "",
				qqgroup: "",
			};
		},
		onShow() {
			this.getUserinfo();
		},
		onLoad() {
			this.initLian(this.userinfo.id);
			this.getup(this.userinfo.pid);
		},
		methods: {
			// 联系方式
			async initLian(id) {
				let n = await this.$http.index.getInfo({
					id: id,
				});
				if (n.code == 1) {
					this.wx = n.data.wx;
					this.QQ = n.data.qq;
					this.qqgroup = n.data.qqq;
					this.phon = n.data.mobile;
				}
			},

			// 获取我的邀请人
			async getup(pid) {
				let n = await this.$http.index.getInfo({
					id: pid,
				});
				if (n.code == 1) {
					this.p_wx = n.data.wx ? n.data.wx : "暂未设置";
					this.p_QQ = n.data.qq ? n.data.qq : "暂未设置";
					this.p_phone = n.data.mobile ? n.data.mobile : "暂未设置";
				}
			},

			//点击确认联系方式
			async queding() {
				let n = await this.$http.index.editInfo({
					mobile: this.phon,
					wx: this.wx,
					qqq: this.qqgroup,
					qq: this.QQ,
				});
				this.$u.toast(n.msg);
				if (n.code == 1) {
					this.show4 = false;
					this.getUserinfo();
					this.initLian(this.userinfo.id);
				}
			},

			getUserinfo() {
				this.$getUserInfo.getUserInfo((res) => {
					this.userinfo = res.data;
				});
			},

			// 点击进入我的团队
			my_tuan() {
				this.$p.navto("/pages/my/myTeam");
			},
			// 点击推广链接
			tuiguang() {
				this.show2 = true;
			},
			cha2() {
				this.show2 = false;
			},
			copy() {
				this.$p.copy(this.val);
			},

			qudao() {
				// console.log(this.userinfo.zhitui);
				if (this.userinfo.zhitui >= 5) {
					this.$p.navto("/pages/my/income");
				} else {
					this.$u.toast("邀请5位实名好友自动开通！");
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.zone {
		background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
		min-height: 100vh;
	}

	.xian {
		background-color: #d7e5f0;
		height: 2rpx;
	}

	.warpss {
		.top_wa {
			position: relative;
			width: 80%;
			top: 50vh;
			margin: 0 auto;
			transform: translateY(-50%);
			background: #fff;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
			border-radius: 15px;
			padding: 20px;
			box-sizing: border-box;

			.chahao {
				width: 40px;
				position: absolute;
				right: 0;
				top: 0px;
			}

			.btn_que {
				width: 95%;
				height: 57px;
				margin: 0 auto;
				line-height: 57px;
				text-align: center;
				background: linear-gradient(270deg, #ff456b 0%, #fe5c4f 100%);
				border-radius: 5px;
				font-size: 16px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #ffffff;
			}

			.head_tou {
				font-size: 18px;
				color: #000;
				text-align: center;
				font-weight: 600;
			}

			.shuom {
				margin: 20px 0;
				font-size: 12px;
				color: #666;
				text-align: center;
			}
		}
	}

	.weixin {
		position: relative;
		width: 100%;
		height: 57px;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		border-radius: 6px;
		border: 1px solid #e3e3e3;
		display: flex;
		align-items: center;
		padding: 10px;
		margin: 5px 0;
	

		.wxh {
			flex: 1;
			font-size: 13px;
			font-weight: 600;
			color: #343434;
			border-right: 1px solid #e5e5e5;
		}

		.inp {
			flex: 3;
			width: 100%;
			padding: 0 10px;
			font-size: 14px;
			font-weight: bold;
			color: #000000;
		}

		.button {
			width: 45px;
			height: 27px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			color: #9D3A23;
			font-size: 12px;
			zoom: 0.95;
		}
	}

	.bot_box {
		padding: 20px;
		font-size: 14px;
		line-height: 1.5;
		color: #5b5757;
	}

	.copy {
		background: linear-gradient(275deg, #fe4768 0%, #ff867d 100%);
		border-radius: 7px;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		width: 50%;
		margin: 0 auto;
		height: 40px;
		margin-top: 20px;
	}

	.http {
		font-size: 14px;
		font-weight: 700;
		color: #ff456c;
		line-height: 23px;
		margin: 10px 0;
	}

	.cha {
		width: 50rpx;
		height: 50rpx;
		margin-top: 30rpx;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	/deep/.u-mode-center-box {
		background-color: transparent;
	}

	.tanchu {
		position: relative;
		// width: 610rpx;
		margin: 0 auto;
		padding: 0 20px;
		padding-top: 20px;
		height: 210px;
		background: url("http://img.cpgm.cc/panda/static/my/bg3.png") no-repeat;
		background-size: 100% 100%;

		.nei {
			font-size: 12px;
			font-weight: 500;
			color: #343434;
			margin-top: 38rpx;
			text-align: center;
		}

		.you {
			font-size: 12px;
			font-weight: 600;
			color: #ff456c;
			text-align: center;
			margin-top: 20rpx;
		}

		.fuzhi {
			width: 295rpx;
			height: 78rpx;
			background: linear-gradient(270deg, #ff456b 0%, #fe5c4f 100%);
			border-radius: 39rpx;
			font-size: 13px;
			font-weight: bold;
			color: #ffffff;
			text-align: center;
			line-height: 78rpx;
			margin: 0 auto;
			margin-top: 20rpx;
		}
	}

	.center_prop {
		position: relative;
		height: 32rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30px;

		.text {
			font-size: 16px;
			font-weight: bold;
			color: #131314;
			margin: 0 32rpx;
		}

		.xing {
			width: 23rpx;
			height: 23rpx;
		}

		.bg_qiu {
			position: absolute;
			width: 69rpx;
			height: 34rpx;
			border-radius: 20rpx;
			z-index: -1;
			left: 50%;
			transform: translateX(-70%);
			background: linear-gradient(180deg, #aee4fe 0%, #8bfdc1 100%);
		}
	}

	.liebiao {
		width: 100%;
		margin: 0 auto;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		margin: 10px 0;

		.left {
			font-size: 27rpx;
			font-weight: 600;
			color: #131314;
		}

		.img_right {
			width: 20rpx;
			height: 25rpx;
		}
	}


	.botm {
		margin-top: 20px;
	}

	
// 我的邀请人
.myinvite {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 20px;
	border-radius: 10px;

	.m_title {
		color: #000000;
		font-size: 20px;
		font-weight: 600;
		text-align: center;
	}
}

.info {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	margin-top: 20px;

	image {
		width: 80px;
		border-radius: 20px;
	}

	text {
		margin-top: 10px;
		color: #000;
		font-size: 14px;
	}
}


	.close {
		width: 30px;
		position: absolute;
		bottom: -60px;
		left: calc(50% - 15px);
	}

	.mar10 {
		margin: 5px 0 !important;
	}

	.main {
		padding: 10px;
	}

	.box {
		background: rgba(255, 255, 255, 0.6);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		padding: 2px 10px;
	}

	.bot {
		width: 100%;
	}
</style>